<template>
	<view class="page_tool">
		<uni-top fixed="true" statusBar="true" class="top" border="" background-color="#585cf7" color="#fff"
			left-text="工具"></uni-top>
		<view class="top_bg"></view>
		<view class="tool_con">
			<navigator class="nav" hover-class="none" url="../proImage/proImage">
				<view class="img_wrap">
					<image class="img" mode="aspectFit" src="../../static/image/page/gj_01.png"></image>
				</view>
				<view class="center">
					<view class="title">自推广营销海报</view>
					<text class="text">分享海报自动带单</text>
				</view>
				<view class="right">
					<uni-icons type="arrowright"></uni-icons>
				</view>
			</navigator>

			<navigator class="nav" hover-class="none" url="/pages/survey/survey" v-if="logInfo.survey">
				<view class="img_wrap">
					<image class="img" mode="aspectFit" src="../../static/image/page/gj_03.png"></image>
				</view>
				<view class="center">
					<view class="title xiahu">
						<text>下户调查工具</text>
						<view class="number" v-if="num>0">{{num}}个任务</view>
					</view>
					<text class="text">下户调查房产情况</text>

				</view>
				<view class="right">
					<uni-icons type="arrowright"></uni-icons>
				</view>
			</navigator>
			<navigator class="nav" hover-class="none" url="/pages/measuring-forehead-products/index">
				<view class="img_wrap">
					<image class="img" mode="aspectFit" src="../../static/image/page/gj_05.png"></image>
				</view>
				<view class="center">
					<view class="title">我要测额</view>
					<text class="text">快速测出可贷额度</text>
				</view>
				<view class="right">
					<uni-icons type="arrowright"></uni-icons>
				</view>
			</navigator>

			<!-- url="../house_loan_calculator/house_loan_calculator" -->
			<navigator class="nav" hover-class="none" @click="tips">
				<view class="img_wrap">
					<image class="img" mode="aspectFit" src="../../static/image/page/wxz1.png"></image>
				</view>
				<view class="center">
					<view class="title">房贷计算器</view>
					<text class="text">帮助客户计算房贷成本</text>
				</view>
				<view class="right">
					<uni-icons type="arrowright"></uni-icons>
				</view>
			</navigator>

			<navigator class="nav" hover-class="none" @click="tips">
				<view class="img_wrap">
					<image class="img" mode="aspectFit" src="../../static/image/page/wxz2.png"></image>
				</view>
				<view class="center">
					<view class="title">网上签约</view>
					<text class="text">现场在线签约</text>
				</view>
				<view class="right">
					<uni-icons type="arrowright"></uni-icons>
				</view>
			</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				logInfo: {},
				num: 0,
			};
		},
		onShow: function() {
			this.logInfo = uni.getStorageSync('userInfo') || {}
			if (this.logInfo) {
				this.getSurveyTaskNum();
			}

		},

		methods: {

			//获取任务
			getSurveyTaskNum() {
				this.$api.getSurveyTaskNum().then(res => {

					this.num = res.data.data
				})
			},
			tips() {
				uni.showToast({
					icon: 'none',
					title: '敬请期待'
				})
			},
		},
	}
</script>


<style lang="scss" scoped>
	.page_tool {
		background-color: #fff;
		width: 100%;
		height: 100%;
		position: absolute;
	}

	.top_bg {
		margin: 0 auto;
		height: 40rpx;
		background: #585cf7;
	}

	.tool_con {
		width: 750rpx;
		margin: -40rpx auto;
		padding: 40rpx 30rpx 0;
		border-radius: 20rpx 20rpx 0px 0px;
		background: #FFFFFF;
	}

	.nav {
		background: #FFFFFF;
		box-shadow: 0px 0px 38rpx 2rpx rgba(0, 0, 0, 0.04);
		border-radius: 1rpx;
		padding: 35rpx 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;

		.img_wrap,
		.img {
			height: 80rpx;
			width: 80rpx;
		}

		.center {
			flex: 1;
			padding-left: 20rpx;
		}

		.title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
		}

		.text {
			font-size: 26rpx;
			font-weight: 500;
			color: #999999;
		}
	}

	.xiahu {
		display: flex;
		align-items: center;
	}

	.number {
		padding: 0 8rpx;
		height: 32rpx;
		background: #FC4073;
		border-radius: 16rpx 16rpx 16rpx 0rpx;
		margin-left: 10rpx;
		font-size: 22rpx;
		color: #FFFFFF;
		display: inline-block;
	}
</style>
